<script setup>
// 导入defineProps函数，用于定义props
// 用于接收父组件传递的title属性
defineProps({
  title: {
    required: true,
    type: String
  }
})
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <!-- 父组件传递的title属性 -->
        <span>{{ title }}</span>
        <div class="extra">
          <!-- 具名插槽，用于接收父组件传递的额外内容 -->
          <slot name="extra"></slot>
        </div>
      </div>
    </template>
    <!-- 插槽接收父组件传递的内容, 默认插槽名为default -->
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  // 设置最小高度为100%，以便内容铺满整个页面
  min-height: 100%;
  // height: 85vh;
  // 设置边框和内边距
  box-sizing: border-box;

  .header {
    // flex布局介绍: 为父元素提供弹性布局能力
    // 设置flex布局, 并居中
    display: flex;
    align-items: center;
    // 设置space-between让标题和额外内容之间有一定间距
    justify-content: space-between;
  }
}
</style>
